<template>
    <el-card class="box-card" style="height: 99.5%">

      <el-row :gutter="20">
        <el-col :span="12">
            <div>
              <el-card class="box-card" shadow="always" style="border-radius: 0px">
                <template #header>
                  <div class="card-header">
                    <span>执行命令</span>
                  </div>
                </template>
                 <!--from表单-->
                <div>
                  <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px">
                     <el-form-item label="目标主机：" prop="server_ids">
                       <el-select class="m-2" filterable v-model="form.server_ids" @click="getServer" multiple placeholder="请选择" style="width: 100%">
                          <el-option v-for="row in server" :key="row.id" :label="row.name" :value="row.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="执行命令：" prop="command">
                          <div ref="command" class="ace-editor"></div>
                      </el-form-item>
                      <el-form-item label="执行描述：" prop="note">
                        <el-input v-model="form.note"></el-input>
                      </el-form-item>
                  </el-form>
                </div>
                    <span class="dialog-footer" style="display: flex; justify-content: center;">
                      <el-button type="primary" @click="submit">开始执行</el-button>
                    </span>
              </el-card>
            </div>
        </el-col>

        <el-col :span="12">
            <div>
              <el-card class="box-card" shadow="always" style="border-radius: 0px">
                <template #header>
                  <div class="card-header">
                    <span>执行结果</span>
                  </div>
                </template>
                <div style="height: 400px;overflow: auto">
                   <span v-if="result.length != 0">
                       <el-tag type="primary">{{start}}</el-tag>
                       <pre>{{result}}</pre>
                       <el-tag type="primary">{{end}}</el-tag>
                   </span>
                   <el-empty v-else description="暂无执行结果" />
                </div>
              </el-card>
            </div>
        </el-col>
      </el-row>

    </el-card>
</template>

<script>
    import ace from 'ace-builds/src-noconflict/ace';
    export default {
        name: "command",
        data(){
            return {
                result: '',
                start: '#####执行开始#####',
                end: '######执行结束#####',
                server: '',
                form: {
                    server_ids: '',
                    command: '',
                    note: ''
                },
                 formRules: {
                    server_ids: [
                        {required: true, message: '请选择目标主机', trigger: 'blur'},
                    ],
                    command: [
                      {required: true, message: '请输入Shell命令', trigger: 'blur'},
                    ],
                 },
            }
        },
        methods: {
            //初始化ace编辑器
           initShellEditor() {
              const editorshell = ace.edit(this.$refs.command);
              editorshell.setTheme('ace/theme/monokai'); // 设置主题
              editorshell.getSession().setMode('ace/mode/javascript'); // 设置语言模式
              editorshell.setValue(); // 设置编辑器内容
              editorshell.setFontSize(15); //字体大小
              editorshell.on('change', () => {
                this.form.command = editorshell.getValue(); // 当编辑器内容变化时，更新 form.shell 字段
              });
           },
          onRest(){
            this.$refs.formRef.resetFields();
          },
          // 获取主机
          getServer() {
              this.$http.get('/cmdb/server/')
                .then(res => {
                    this.server = res.data.data;
                })
            },
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                this.$http.post('/batch_command/', this.form)
                  .then(res => {
                    if (res.data.code == 200){
                      console.log(res.data)
                      this.result = res.data.data;
                      this.$message.success('执行成功');
                      // this.onRest(); //重置表单
                    }else {
                        this.result = res.data.data;
                        // this.onRest(); //重置表单
                      }
                   })
                   .catch(() => {
                    });
              } else {
                this.$message.error('格式错误！')
              }
            })
          },
        },
         mounted() {
              this.initShellEditor();
          },
    }
</script>

<style scoped>
    .ace-editor {
      width: 100%;
      height: 250px; /* 设置编辑器高度 */
      border: 1px solid #ccc;
      /*background-color: #f0f0f0;*/
    }
</style>